<template>
	<div class="personal-container">
		<van-cell
			is-link
			class="vanCell"
			center
			:to="{
				path: '/personal/editProfile',
				query: { userList },
			}"
			v-for="item in userList"
			:key="item.id"
		>
			<!-- 使用 title 插槽来自定义标题 -->
			<template #icon>
				<div class="icon-img">
					<img :src="'http://127.0.0.1:3000/public' + item.head_img" alt="" />
				</div>
			</template>
			<template #title>
				<div>
					<span class="custom-title">
						<i
							style="color: blue; margin-right: 5px"
							class="iconfont iconxingbienan"
						></i
						>{{ item.nickname }}</span
					>
				</div>
				<div>
					<span class="times">{{ item.create_date | times }}</span>
				</div>
			</template>
		</van-cell>
		<!-- ---------------------------------功能列表开始------------------------------------------------------ -->
		<van-cell title="我的关注" is-link value="关注内容" />
		<van-cell title="我的跟帖" is-link value="跟帖/回复" />
		<van-cell title="我的收藏" is-link value="文章/视频" />
		<van-cell title="设置" is-link />
		<!-- ---------------------------------功能列表结束------------------------------------------------------ -->
		<div class="out-login-row">
			<van-button type="default" block round class="out-login">退出</van-button>
		</div>
	</div>
</template>

<script>
	import { userDetailApi } from "@/api/index";
	import storage from "@/utils/storage";
	export default {
		name: "personalIndex",
		data() {
			return {
				userList: [],
			};
		},
		methods: {
			async getUserDetail() {
				const { id } = storage.getUser();
				const {
					data: { data },
				} = await userDetailApi(id);

				this.userList = [data];

				this.userList = this.userList.map((item) => {
					return {
						id: item.id,
						create_date: item.create_date,
						gender: item.gender,
						head_img: item.head_img,
						nickname: item.nickname,
						password: item.password,
					};
				});
				console.log(this.userList);
			},
		},
		created() {
			this.getUserDetail();
		},
	};
</script>

<style lang="less" scoped>
	.personal-container {
		width: 100vw;
		height: 100vh;
		background-color: #eee;
		/deep/.van-cell {
			background-color: unset;
			height: 55px;
			border-bottom: 1px solid #ddd;
			padding: 15px 16px;
			.van-cell__title {
				font-size: 18px;
				font-weight: 700;
			}
		}
		/deep/.vanCell {
			height: 120px;
			border-bottom: 5px solid #dddddd;
			.icon-img {
				img {
					width: 75px;
					height: 75px;
					border-radius: 50%;
					margin-right: 8px;
				}
			}
			.van-cell__title {
				font-size: 14px;
			}
			.times {
				font-weight: 400;
			}
		}
		.out-login-row {
			padding: 20px 35px;
			.out-login {
				background-color: #e35e11;
				color: #fff;
				font-size: 32px;
			}
		}
	}
</style>